<template>
	<view id="editChild">
		<form>
			<view class="cu-form-group margin-top-lg">
				<view class="title">姓名</view>
				<input placeholder="孩子名字" name="input" :value="userName" @input="editUserName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">年龄</view>
				<input placeholder="孩子年龄" name="input" type="number" :value="age" @input="editAge"></input>
			</view>
			<view class="cu-form-group" style="justify-content: flex-start;">
				<view class="title">性别</view>
				<radio-group class="block" @change="RadioChange">
					<view class="cu-form-group" style="padding-left:0;">
						<label class="flex align-center">
							<radio class="orange" :class="gender=='男'?'checked':''" :checked="gender=='男'?true:false" value="男" style="transform:scale(0.7)"></radio>
							男
						</label>
						<label class="flex align-center">
							<radio class='orange margin-left-sm' :class="gender=='女'?'checked':''" :checked="gender=='女'?true:false" value="女" style="transform:scale(0.7)"></radio>
							女
						</label>
					</view> 
				</radio-group>
			</view>
			<view class="cu-form-group">
				<view class="title">电话</view>
				<input placeholder="孩子电话" name="input" type="number" :value="tel" @input="editTel"></input>
			</view>
		</form>
		
		<view class="padding flex margin-top-xl my-btn">
			<button class="cu-btn line-red margin-xs lg flex-sub" @tap="showDelModal">删除</button>
			<view class="cu-modal" :class="delModal=='delModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">删除</view>
						<view class="action" @tap="hideDelModal">
							<text class="cuIcon-close" style="color:#000;"></text>
						</view>
					</view>
					<view class="padding-xl">
						确定要删除{{userName}}吗?
					</view>
					<view class="cu-bar bg-white justify-center align-center padding-lr-lg">
						<button class="cu-btn flex-sub" style="background-color: #fff;border:2upx solid #000;color:#000;" @tap="hideDelModal">取消</button>
						<button class="cu-btn margin-left flex-sub bg-red" :loading="loadingDel" @tap="del">删除</button>
					</view>
				</view>
			</view>
			
			<button class="cu-btn bg-black margin-xs lg flex-twice" :loading="loadingChange" @click="modify">修改</button>
		</view>
		 
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	 
	export default {
		data() {
			return {
				userName: '',
				age: 0,
				gender: '男',
				tel: '',
				id: 0,
				loadingDel: false,
				loadingChange: false,
				delModal: '',	//删除对话框
			}
		},
		onLoad(obj) {
			this.$store.state.studentsList.forEach((item,index) => {
				if(item.id == obj.id){
					this.userName = this.$store.state.studentsList[index].student_name
					this.age = this.$store.state.studentsList[index].age
					this.gender = this.$store.state.studentsList[index].gender
					this.tel = this.$store.state.studentsList[index].guardian_phone
					this.id = this.$store.state.studentsList[index].id
					return false
				}
			})
		},
		methods: {
			showDelModal(){
				this.delModal = 'delModal'
			},
			hideDelModal(){
				this.delModal = ''
			},
			RadioChange(e) {
				this.gender = e.detail.value
			},
			// 删除
			del(){
				this.remove()
			},
			// 修改
			modify(){
				// 表单验证
				let userNameReg = /^[\u4E00-\u9FA5]{2,4}$/
				let telReg = /^1(3|4|5|6|7|8|9)\d{9}$/
				let ageReg = /^((1[0-5])|[1-9])?\d$/	//0-199岁
				if(this.userName === '' || this.age === '' || this.gender === '' || this.telReg === ''){
					uni.showToast({title: '还有未填的内容', icon: 'none'})
					return false
				}
				if(!userNameReg.test(this.userName)){
					uni.showToast({title: '必须是中文名,长度2-4位', icon: 'none'})
					return false
				}
				if(!ageReg.test(this.age)){
					uni.showToast({title: '年龄超出范围了', icon: 'none'})
					return false
				}
				if(!telReg.test(this.tel)){
					uni.showToast({title: '手机号码格式不正确', icon: 'none'})
					return false
				}
				
				this.change()
			},
			async change(){
				this.loadingChange = true
				
				let res = await this.$api.changeStudent(this.id, {student_name: this.userName, age: this.age, gender: this.gender=='男'?1:2, phone: this.tel})
				if(res.statusCode === 200){
					this.loadingChange = false
					
					console.log('修改学生资料', res.data.data)
					
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						mask: true,
						success: () => {
							// 我的学生列表
							this.getStudents()
							
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
					
				}
			}, 
			async remove(){
				this.loadingDel = true
				
				let res = await this.$api.deleteStudent(this.id)
				if(res.statusCode === 200){
					this.loadingDel = false
					
					console.log('删除学生', res.data.data)
					
					uni.showToast({
						title: '删除成功',
						icon: 'success',
						mask: true,
						success: () => {
							// 我的学生列表
							this.getStudents()
							
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
				}
			},
			// 我的学生列表
			async getStudents(){
				let res = await this.$api.students()
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('我的学生列表', res.data.data)
					
					this.$store.dispatch('sendStudents', res.data.data)
				}
			},
			editUserName(e){
				this.userName = e.detail.value
			},
			editAge(e){
				this.age = e.detail.value
			},
			editTel(e){
				this.tel = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	#editChild{
		.my-btn{
			position: fixed;
			width: 100%;
			bottom: 20upx;
		}
	}
</style>
